<gridster [options]="gridOptions">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
        <div *ngIf="item.content" class="card-content">
            <div [ngSwitch]="item.card.type"  [style.transform]="'scale(' + item.card.zoom + ')'">
                <div *ngSwitchCase="widgetView">
                    <app-fuxa-view class="lab-body" id="lab" [view]="item.content" [hmi]="hmi" [gaugesManager]="gaugesManager"></app-fuxa-view>
                </div>
                <div *ngSwitchCase="widgetAlarms">
                    <app-alarm-view #alarmsview [fullview]="true" [showInContainer]="true" [autostart]="true" (showMode)="onAlarmsShowMode($event)"></app-alarm-view>
                </div>
                <div *ngSwitchCase="widgetIframe">
                    <!-- <app-iframe [link]="item.card.data" [style.height]="iframe.height + 'px'" [style.transform]="'scale(' + iframe.scale + ')'" [style.width]="iframe.width + 'px'"
                    [style.zoom]="1 / iframe.scale" class="iframe-class"></app-iframe> -->
                    <app-iframe [link]="item.card.data" class="iframe-class"></app-iframe>
                </div>
            </div>
        </div>
        <div *ngIf="edit" class="card-tool">
            {{'card.style-zoom' | translate}} 
            <mat-slider max="2" min="0.1" [step]="0.02" [(ngModel)]="item.card.zoom" (input)="onZoomChanged(item, $event)"
                style="min-width: 80px" thumbLabel="true" (mousedown)="$event.stopPropagation()">
            </mat-slider>
            <button mat-icon-button (click)="onEditCard(item)" (mousedown)="$event.stopPropagation()">
                <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button (click)="onRemoveCard(item)" (mousedown)="$event.stopPropagation()">
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </gridster-item>
</gridster>